<template>
  <view class="page-music-control" @click="togglePageMusic">
     <image :src="currentImageUrl" class="page-music-image" :class="{ animating: isAnimating }"></image>
    <!-- <image :src="imageUrl + '/yinyue/Vector.png'" class="page-music-image-2"></image> -->
  </view>
</template>

<script>
import { pageSpecificMusicManager, setPageSpecificMusicPaused } from './audio.js';

export default {
  data() {
    return {
       imageUrl: this.$imageUrl,
        isPageMusicPlaying: true,
        currentImageUrl: 'https://xnlv-test.lizxx.com/image/xnlv/static/yinyue/Group-1496.png',
        isAnimating: true,
    };
  },
  methods: {
   togglePageMusic() {
     if (this.isPageMusicPlaying) {
       pageSpecificMusicManager.pausePageSpecificMusic();
       this.currentImageUrl = 'https://xnlv-test.lizxx.com/image/xnlv/static/yinyue/Group-1497.png';
       this.isAnimating = false;
       // 调用方法设置变量值
       setPageSpecificMusicPaused(true);
     } else {
       pageSpecificMusicManager.playPageSpecificMusic();
       this.currentImageUrl = 'https://xnlv-test.lizxx.com/image/xnlv/static/yinyue/Group-1496.png';
       this.isAnimating = true;
       // 调用方法设置变量值
       setPageSpecificMusicPaused(false);
     }
     this.isPageMusicPlaying =!this.isPageMusicPlaying;
   },
  },
};
</script>

<style scoped>
/* 定义容器样式 */
.page-music-control {
 display: flex;
   flex-direction: column;
   position: absolute;
   z-index: 5;
   width: auto;
   height: auto;
   right: 0;
   justify-content: flex-end;
   align-items: flex-end;
   margin-top: -30rpx;
   margin-right: 12rpx;
}

/* 特定页面音乐图标样式 */
.page-music-image {
  z-index: 3;
    width: 30rpx;
    height: 30rpx;
}
/* .page-music-image.animating {
  animation: rotateAnimation 2s linear infinite;
} */
.page-music-image-2 {
  position: absolute;
  z-index: 4;
  width: 15.33rpx;
  height: 18.78rpx;
  margin-bottom: 24rpx;
  margin-right: 26rpx;
}

/* @keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} */
</style>